<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏渲染</title>
    <link rel="stylesheet" href="../static/css/atom.css">
    <style>
        #blocker {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .label-content {
            /* position: absolute;
            bottom: 72px;
            left: -58px; */

            position: absolute;
            top: 20px;
            left: 20px;

            width: 130px;
            padding: 6px 10px;
            border-radius: 2px;
            background-color: #01091b;
            opacity: 0.7;
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: #ffffff;
        }
    </style>
    <script type="importmap">
    {
        "imports": {
        "three": "../three/v170/three.module.min.js",
        "three/addons/": "../three/v170/"
        }
    }
    </script>
</head>

<body>

    <div id="container"></div>
    <div id="blocker"></div>

    <script type="module">
        import * as THREE from 'three';
        import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
        import { CSS3DRenderer, CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
        import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DragControls } from 'three/addons/controls/DragControls.js';
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        console.log(`[THREE版本]`, THREE.REVISION);

        let camera, scene, renderer;
        let controls;

        function Element(id, x, y, z, ry) {
            const div = document.createElement('div');
            div.style.width = '480px';
            div.style.height = '360px';
            div.style.backgroundColor = '#f00';
            div.innerHTML = `
                <div class="label-content">
                    <div class="label-item">进程:xxxx</div>
                    <div class="label-item">进程:xxxx</div>
                    <div class="label-item">进程:xxxx</div>
                    <div class="label-item">进程:xxxx</div>
                </div>
            `;

            const object = new CSS3DObject(div);
            object.position.set(x, y, z);
            object.rotation.y = ry;

            return object;
        }

        init();
        animate();

        function init() {
            const container = document.getElementById('container');
            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
            camera.position.set(500, 350, 750);

            scene = new THREE.Scene();

            // 创建立方体的几何体
            const geometry = new THREE.BoxGeometry(120, 120, 120);
            // 创建立方体的材质
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            // 创建立方体的网格
            const cube = new THREE.Mesh(geometry, material);
            // 将立方体添加到场景中
            scene.add(cube);

            renderer = new CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);

            const group = new THREE.Group();
            group.add(new Element('SJOz3qjfQXU', 0, 0, 240, 0));
            group.add(new Element('Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2));
            group.add(new Element('IrydklNpcFI', 0, 0, - 240, Math.PI));
            group.add(new Element('9ubytEsCaS0', - 240, 0, 0, - Math.PI / 2));
            scene.add(group);

            controls = new TrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 4;

            window.addEventListener('resize', onWindowResize);

            const blocker = document.getElementById('blocker');
            blocker.style.display = 'none';

            controls.addEventListener('start', function () {
                blocker.style.display = '';
            });
            controls.addEventListener('end', function () {
                blocker.style.display = 'none';
            });
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
    </script>


</body>

</htm